<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <jsp:include page="../header.jsp"></jsp:include>
<fieldset class="layui-elem-field layui-field-title">
  <legend>添加员工</legend> 
</fieldset>
	<form action="staff/add" method ="post" class="layui-form">
		
		<div class="layui-form-item">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-inline">
				<input type="text" name = "name" id="sname" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">电话</label>
			<div class="layui-input-inline">
				<input type="text" name = "phone" id="sphone" class="layui-input"><br>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">部门</label>
			<div class="layui-input-inline">
				<select name="dept_id" lay-filter="dept_id"></select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">领导</label>
			<div class="layui-input-inline">
				<select name="leader"></select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">工资</label>
			<div class="layui-input-inline">
				<input type="number" name = "salary" id="salary" value="3000" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-inline">
				<input type="submit" value="添加" class="layui-btn layui-btn-primary layui-border-blue" onclick="return formsubmit()">
			</div>
		</div>

	</form>
<script type="text/javascript">
/* 因为表单是由Layui生成了一段DIV替换了原生的select */
//获取layui的表单模块
layui.use('form', function(){
var form = layui.form;
    $.ajax({ 
		url:'dept/getAll', // 请求地址
		type:'post', //请求类型 post get 
		data:{},//请求的参数
		dataType:'json',//返回数据的类型， text html xml json
		success: function(data){//请求成功后  调用当前的函数
			//服务器处理成功  返会的数据类型与dataType相同
			//data就是从服务器返回的数据
		 var html="<option value='0'>请选择部门</option>";
		 //遍历部门
		 $.each(data,function(index,item){
			 html +="<option value='"+item.id+"'>"+item.name+"</option>";
		 });
		 $("select[name='dept_id']").html(html);
		 // //渲染表单
       form.render();
	
		},
		error:function(){
		//请求失败后  调用当前的函数
			alert("失败")
		}
	});
    //去绑定 下拉列表的选择事件
    form.on('select(dept_id)', function(data){
			 //获取当前被选中的部门
			 var dept_id= data.value;
			 //alert(dept_id);
			 //获取这个部门的员工
			 if(dept_id>0){
			 $.ajax({
					url:'staff/getByDeptId', // 请求地址
					type:'post', //请求类型 post get 
					data:{dept_id:dept_id},//请求的参数
					dataType:'json',//返回数据的类型， text html xml json
					success: function(data){//请求成功后  调用当前的函数
						//服务器处理成功  返会的数据类型与dataType相同
						//data就是从服务器返回的数据
						 var html="<option value='0'>请选择领导</option>";
						 //遍历部门
							 $.each(data,function(index,item){
								 html +="<option value='"+item.id+"'>"+item.name+"</option>";
							 });
						 $("select[name='leader']").html(html);
						 // //渲染表单
						 form.render();
					},
					error:function(){
					//请求失败后  调用当前的函数
						alert("失败")
					}
			 	});
			 }else{
				 $("select[name='leader']").html('');
			 }
		 });
		
		
	});
</script>
	
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
	<script type="text/javascript">
		function formsubmit(){
			var name= document.getElementById("sname").value;
			var reg_name = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/
			if(!reg_name.test(name)){
				alert("名字不符合格式");
				return false;
			}
			
			var phone= document.getElementById("sphone").value;
			var reg_phone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
			if(!reg_phone.test(phone)){
				alert("手机号不符合格式");
				return false;
			}
			var salary= document.getElementById("salary").value;
			var reg_salary = /^(([1-9][0-9]*)|((([1-9][0-9]*)|0)\.[0-9]{1,2}))$/
			if(!reg_salary.test(salary)){
				alert( "工资不符合格式");
				return false;
			}
		}	
		
	</script>
 <jsp:include page="../footer.jsp"></jsp:include>